<template>
  <div class="loginBg">
    <a-card title="用户登录" :bordered="false" class="loginBox">
      <a-form
        :model="formState"
        name="basic"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
      >
        <!-- 用户名选项框 -->
        <a-form-item
          label="用户名"
          name="account"
          :rules="[{ required: true, message: '请输入您的账号!' }]"
        >
          <a-input v-model:value="formState.account" />
        </a-form-item>
        <!-- 密码框 -->
        <a-form-item
          label="密&nbsp;&nbsp;&nbsp;码"
          name="password"
          :rules="[{ required: true, message: '请输入您的密码!' }]"
        >
          <a-input-password v-model:value="formState.password" />
        </a-form-item>

        <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
          <a-button type="primary" html-type="submit">登录</a-button>
        </a-form-item>

      </a-form>
    </a-card>
  </div>
</template>

<script lang="ts">
import {reactive,toRefs} from 'vue'
import LoginFrom from '../type/LoginFrom'
import api from '../http/api'
import {useRouter} from 'vue-router'
export default {
  
  setup(){
     const router=useRouter()
     const state=reactive<{formState:LoginFrom}>({
        formState:{
          account:'xiaowang',
          password:'123456'
        }
     })
     const onFinish = async(values: any) => {
         console.log('Success:', values);
         const result=await api.user.loginApi(values)
         if(result.data.code){
           //保存token到本地
           localStorage.setItem('token',result.data.data.token)
           //保存用户到状态机中
           //路由跳转
           router.replace({
             path:'/'
           })
         }
         
     };
     const onFinishFailed = (errorInfo: any) => {
      console.log('Failed:', errorInfo);
     
      
     };
     return {
      ...toRefs(state),
      onFinish,
      onFinishFailed
     }
  }
};
</script>

<style>
  .loginBg{
    background-color: #1D243F;
    height: 100vh;
  }
  .loginBox{
    position:absolute;
    width: 300px;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
  }
</style>